<template>
  <el-dialog v-model="dialogVisible" title="批量删除" width="70%">
    <el-form :model="deleteForm" label-width="100px">
      <el-form-item label="选择项目">
        <el-select 
          clearable
          v-model="deleteForm.projectId" 
          placeholder="请选择项目"
          @change="loadProjectFiles"
        >
          <el-option
            v-for="item in projectList"
            :key="item.id"
            :label="item.proname"
            :value="item.proname"
          />
        </el-select>
      </el-form-item>
    </el-form>

    <el-table 
      :data="fileList" 
      border 
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55" />
      <el-table-column prop="name" label="项目名称" />
      <el-table-column prop="filename" label="文件名" />
    </el-table>

    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button 
          type="danger" 
          :disabled="!selectedFiles.length"
          @click="handleBatchDelete"
        >
          删除选中文件
        </el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref,watch,onMounted, defineProps, defineEmits, computed } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import request from '@/utils/request'

const props = defineProps({
  modelValue: Boolean,
  projectList: Array
})

const emit = defineEmits(['update:modelValue'])

const dialogVisible = computed({
  get: () => props.modelValue,
  set: (value) => emit('update:modelValue', value)
})
watch(dialogVisible, (newVal) => {
  console.log('newVal',newVal)
  loadProjectFiles()
});

const deleteForm = ref({ projectId: '' })
const fileList = ref([])
const selectedFiles = ref([])

onMounted(() => {
  // loadProjectFiles()
})

const loadProjectFiles = async (projectname) => {
  if (!projectname) {
    projectname = ''
  }
  
  try {
    const {data} = await request.post(`/zhsj/api/selectslsjpage?pageindex=0&pagesize=100&name=${projectname}`)
    fileList.value = data.records
  } catch (error) {
    ElMessage.error('加载文件列表失败')
  }
}

const handleSelectionChange = (selection) => {
  selectedFiles.value = selection
}

const handleBatchDelete = () => {
  if (!selectedFiles.value.length) return

  ElMessageBox.confirm(
    `确认删除选中的 ${selectedFiles.value.length} 个文件吗？`, 
    '提示', 
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  ).then(async () => {
    try {
      await request.post('/zhsj/api/delslsjall',selectedFiles.value.map(item => item.id))
      ElMessage.success('删除成功')
      await loadProjectFiles(deleteForm.value.projectId)
    } catch (error) {
      ElMessage.error('删除失败')
    }
  })
}
</script>

<style scoped>
.dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}
</style> 